<template>
  <div class="stationNoticeStore">
    <c-title :text="titleName"></c-title>
    <div class="weekList" v-if="weekMessage.length != 0">
      <div class="weekItem" v-for="(item, key) in weekMessage" :key="item._key" @click="goPages(item, key)">
        <div class="wrapper">
          <!-- <div class="face">
            <div class="img" :class="item.class_name">
              <i class="unread" v-if="item.is_read == 1"></i>
              <i class="iconfont" :class="item.icon"></i>
            </div>
          </div> -->
          <div class="content">
            <div class="head">
              <div class="name">
                <div class="iconfont-bg">
                  <i class="iconfont icon-fontclass-wenzhang"></i>
                </div>
                <span style="font-size: 0.875rem;">{{ item.title }}</span>
                <span class="no-read" v-if="item.is_read == 1"></span>
              </div>
              <div class="time">{{getTimeHandle(item.created_at) }}</div>
            </div>
            <p class="c1 ca" style="text-align: left; margin-bottom: 0.8125rem; font-size: 0.75rem;">{{ item.desc }}</p>
            <div style="text-align: left; color: #101010; font-size: 0.75rem; margin-bottom: 0.5rem;">申请时间:{{ item.msg_body.apply_time }}</div>
            <div style="text-align: left; color: #101010; font-size: 0.75rem; margin-bottom: 0.5rem;">会员:{{ item.msg_body.nickname }}</div>
            <div style="text-align: left; color: #101010; font-size: 0.75rem; margin-bottom: 0.5rem;">门店名称:{{ item.msg_body.store_name }}</div>
            <div class="text" v-if="item.type_id != 1 && item.type_id != 3 && item.type_id != 6">
              <!-- <p class="c2 ca" v-for="(item2,key2) in item.msg_body" :key="key2">{{item.type_id}}{{key2}}{{item2}}</p> -->
              <!-- <p class="c2 ca" v-for="(item2, key2) in item.msg_body" :key="key2">{{ msg_body_types[item.type_id] ? msg_body_types[item.type_id][key2] : "未知属性:" }}{{ item2 }}</p> -->
            </div>

            <div class="anchor" v-else-if="item.msg_body != null && Object.keys(item.msg_body).length != 0">
              <div class="face">
                <img :src="item.msg_body.img" alt="" />
              </div>
              <div class="desc">
                <p class="name">{{ item.msg_body.title }}</p>
                <p v-if="item.type_id == 1 && item.msg_body.desc">{{ item.msg_body.desc }}</p>
                <p class="tips" v-else-if="item.type_id == 3">{{ item.msg_body.desc }}</p>
                <p class="tips" v-else-if="item.type_id == 6 || item.type_id == 1">点击查看</p>
              </div>
            </div>
          </div>
        </div>
        <div class="kefuTxt" v-if="item.type_id == 9">{{ item.content }}</div>
        <div class="botm" v-if="item.url != ''">
          <span>查看详情</span>
          <i class="iconfont icon-advertise-next"></i>
        </div>
      </div>
    </div>

    <div class="empty" v-if="weekMessage.length == 0">
      <div class="img">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/massage_blankpage@3x.png" alt="" />
      </div>
      <p class="text">还没有消息哟</p>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "../../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      titleName: "服务通知",
      weekMessage: [],
      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0, //总页数

      listData: []
    };
  },
  activated() {
    if (this.$route.query.pageTitle) {
      this.titleName = this.$route.query.pageTitle;
      this.fun.setWXTitle(this.titleName);
    }
    this.getListData();
  },
  methods: {
    getTimeHandle(timestamp){
      let day = new Date(timestamp*1000);
      let year = day.getFullYear(),
      month = day.getMonth()+1,
      date = day.getDate(),
      hours = day.getHours(),
      minutes = day.getMinutes();
      if(hours<10){
        hours = '0'+hours
      }
      if(month<10){
        month = '0'+month
      }
      if(date<10){
        date = '0'+date
      }
      if(minutes<10){
        minutes = '0' + minutes;
      }
      return `${year}-${month}-${date} ${hours}:${minutes}`
    },
    async goPages(item, key) {

      let res = await $http.get("plugin.instation-message.api.message.read-message", {
        id: item._id
      });
      if (res.result !== 1) {
        Toast(res.msg);
        return;
      }
      this.$set(this.weekMessage[key], "is_read", 0);
      if (item.url) {
        let url = item.url + '&id=' + item.msg_body.apply_id;
        window.location =url;
      }
    },
    initData() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    async getListData() {
      this.initData();
      Toast.loading({
        message: "加载中",
        forbidClick: true
      });
      let res = await $http.get("plugin.instation-message.api.message.get-type-list", {
        type_id: 10
      });
      Toast.clear();

      if (res.result !== 1) {
        Toast(res.msg);
        return;
      }
      this.isLoadMore = true;
      this.total_page = res.data.last_page;
      if (!this.total_page) {
        this.total_page = 0;
      }
      this.weekMessage = res.data.data;
      console.log(this.weekMessage,"this.weekMessage====")
    },
    //加载更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        // that.loading = true;
        return;
      } else {
        this.page += 1;
        $http
          .get("plugin.instation-message.api.message.get-type-list", {
            page: this.page,
            type_id: 10
          })
          .then(res => {
            console.log(res);
            this.isLoadMore = true;
            if (res.result === 1) {
              var nextPageData = res.data.data;
              this.weekMessage = this.weekMessage.concat(nextPageData);
              //this.status = res.data.status;
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>

.stationNoticeStore {
  padding: 1.3125rem 1.0625rem;

  .iconfont-bg {
    background: rgb(255, 174, 139);
    border-radius: 100px;
    width: 1.875rem;
    text-align: center;
    height: 1.875rem;
    color: #fff;
    line-height: 1.875rem;
    margin-right: 0.75rem;
  }
}

.kefuTxt {
  padding-right: 0.563rem;
  padding-bottom: 0.63rem;
  color: #999;
  word-break: break-all;
  text-align: left;
}

.page {
  background: rgb(250, 250, 250);
  min-height: 100vh;
  padding-bottom: 3.0625rem;
  text-align: left;
}

.tool {
  height: 2.814rem;
  display: flex;
  align-items: center;
  background: #fff;
  color: #999;
  padding-left: 0.969rem;
  padding-right: 1.063rem;
  // filter: drop-shadow(0 1px 10px #969696);

  &.emptyTool {
    background: rgb(250, 250, 250);
    justify-content: flex-end;
  }
}

.items {
  padding-left: 0.781rem;
  background: #fff;

  .item {
    width: 100%;
    display: flex;
    border-bottom: 0.031rem solid #f4f4f4;
    transition: 0.5s;

    &:hover {
      background: #eee;
    }

    .face {
      padding: 0.344rem 0.688rem 0.938rem 0.688rem;

      .img {
        width: 2.875rem;
        height: 2.875rem;
        background-image: linear-gradient(-43deg, #2dadff 0%, #aadaff 100%), linear-gradient(#dfdfdf, #dfdfdf);
        background-blend-mode: normal, normal;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        .iconfont {
          font-size: 1.5rem;
          color: #fff;
        }
      }
    }

    .content {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding-right: 1.188rem;

      .c1 {
        display: flex;

        .name {
          flex: 1;
          letter-spacing: 0.075rem;
          color: #333;
          font-size: 1rem;
        }

        .time {
          letter-spacing: 0.056rem;
          color: #999;
          font-size: 0.75rem;
        }
      }

      .c2 {
        display: flex;

        .desc {
          flex: 1;
          padding-right: 0.25rem;
          font-size: 0.875rem;
          letter-spacing: 0.066rem;
          color: #999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .count {
          background-color: #f42a2a;
          border-radius: 0.5rem;
          padding: 0 0.219rem;
          height: 1rem;
          line-height: 1rem;
          color: #fff;
          font-size: 0.75rem;
        }
      }
    }
  }
}

.weekList {
  padding: 0 0;

  .week {
    height: 2.781rem;
    letter-spacing: 0.025rem;
    color: #000;
    font-size: 1rem;
    padding-left: 0.188rem;
    padding-top: 0.93rem;
  }

  .weekItem {
    padding: 0 0.781rem;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding-left: 0.594rem;
    padding-top: 0.719rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    transition: 0.5s;
    overflow: hidden;

    &:hover {
      background: #eee;
    }

    .wrapper {
      display: flex;

      .face {
        width: 2rem;

        .img {
          width: 1.125rem;
          height: 1.125rem;
          background-blend-mode: normal, normal;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          position: relative;

          .iconfont {
            font-size: 0.5rem;
            color: #fff;
          }

          .unread {
            width: 0.313rem;
            height: 0.313rem;
            background-color: #f42a2a;
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }

      .content {
        padding-right: 0.563rem;
        flex: 1;

        .head {
          display: flex;
          align-items: flex-end;

          .name {
            position: relative;
            display: flex;
            align-items: center;
            flex: 1;
            color: #000;
            font-size: 1rem;
            text-align: left;
          }

          .no-read {
            width: 0.375rem;
            height: 0.375rem;
            background: #f01919;
            border-radius: 100px;
            margin-left: 0.375rem;
          }

          .time {
            font-size: 0.75rem;
            letter-spacing: 0.019rem;
            line-height: 1.875rem;
            color: #666;
          }
        }

        .c1 {
          margin-top: 0.719rem;
        }

        .ca {
          font-size: 0.75rem;
          line-height: 1.25rem;
          letter-spacing: 0.019rem;
          color: #666;
        }

        .anchor {
          display: flex;
          padding: 1rem 0 0.531rem 0;

          .face {
            width: 4rem;

            img {
              width: 4rem;
              height: 4rem;
              background-color: #999;
            }
          }

          .desc {
            height: 4rem;
            padding-left: 0.531rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              letter-spacing: 0.019rem;
              color: #000;
              font-size: 0.75rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .tips {
              letter-spacing: 0.019rem;
              font-size: 0.75rem;
              color: #f42a2a;
            }
          }
        }
      }
    }

    .botm {
      border-top: 0.031rem solid #f4f4f4;
      height: 1.938rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: 0.022rem;
      color: #666;
      font-size: 0.875rem;
    }
  }
}

.empty {
  height: calc(100vh - 12rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  .img {
    text-align: center;
    height: 11.688rem;

    img {
      width: 15.344rem;
      height: 11.688rem;
    }
  }

  .text {
    text-align: center;
    margin-top: 1.125rem;
    font-size: 1rem;
    letter-spacing: 0.075rem;
    color: #c8c8c8;
  }
}

.items .item .face .img1,
.weekList .img1 {
  background-image: linear-gradient(-43deg, #2dadff 0%, #aadaff 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img2,
.weekList .img2 {
  background-image: linear-gradient(-43deg, #ffb228 0%, #ffdd89 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img3,
.weekList .img3 {
  background-image: linear-gradient(-43deg, #36d6a6 0%, #7ce5de 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img4,
.weekList .img4 {
  background-image: linear-gradient(-43deg, #418dfe 0%, #53a3fd 50%, #65b8fb 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img5,
.weekList .img5 {
  background-image: linear-gradient(-43deg, #ff250f 0%, #ff7d7f 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img6,
.weekList .img6 {
  background-image: linear-gradient(-43deg, #2983f8 0%, #2498f2 50%, #1eadeb 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img7,
.weekList .img7 {
  background-image: linear-gradient(-43deg, #7667fe 0%, #8376fe 50%, #9084fd 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img8,
.weekList .img8 {
  background-image: linear-gradient(-43deg, #fd5355 0%, #ff96a2 100%), linear-gradient(#dfdfdf, #dfdfdf);
}

.items .item .face .img9,
.weekList .img9 {
  background-image: linear-gradient(-43deg, #2dadff 0%, #aadaff 100%), linear-gradient(#dfdfdf, #dfdfdf);
}
</style>